<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <template>
            <a-col
              :xxl="7"
              :xl="8"
              :lg="12"
              :md="14"
              :sm="24"
              :xs="24"
              sytle="min-width:200px"
            >
              <a-form-item label="时间范围">
                <a-range-picker
                  :show-time="{ format: 'HH:mm:ss' }"
                  format="YYYY-MM-DD HH:mm:ss"
                  :placeholder="['开始', '结束']"
                  @change="dateTimeRangeChange"
                  style="width: 100%"
                  v-model="pikcerData"
                />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :xl="7" :lg="12" :md="10" :sm="8" :xs="24">
              <a-form-item label="用户账号">
                <a-input
                  placeholder="请输入用户账号查询"
                  v-model="queryParam.loginName"
                  :maxLength="20"
                ></a-input>
              </a-form-item>
            </a-col>

            <a-col :xxl="3" :xl="4" :lg="8" :md="8" :sm="8" :xs="24">
              <a-form-item label="操作类型">
                <!--                <a-input placeholder="请输入手机号码查询" v-model="queryParam.mobile"></a-input>-->
                <a-select @change="actionChange" v-model="tempActionType">
                  <!--                  操作标识(add,delete,update,query)   操作对象，设备或其他实体(device,camera,user,record) -->
                  <a-select-option value="add">新增</a-select-option>
                  <a-select-option value="update">编辑</a-select-option>
                  <a-select-option value="delete">删除</a-select-option>
                  <!-- <a-select-option value="query">查询</a-select-option> -->
                  <a-select-option value="alarm">异常</a-select-option>
                  <a-select-option value="login">登录</a-select-option>
                  <a-select-option value="logout">登出</a-select-option>
                  <a-select-option value="invocation">启用</a-select-option>
                  <a-select-option value="interdict">禁用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>

          <a-col :xxl="3" :xl="5" :lg="8" :md="8" :sm="8" :xs="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="resetParam"
                icon="reload"
                style="margin-left: 8px"
                ghost="true"
                >重置
              </a-button>
              <!-- 日志导出按钮 -->
              <!-- <a-button
                type="primary"
                style="margin-left: 8px"
                @click="exportLog"
                icon="upload"
                >日志导出</a-button
              > -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator" style="border-top: 5px">
      <!-- 日志导出按钮 -->
      <a-button type="primary" @click="exportLog" icon="upload"
        >日志导出</a-button
      >
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="logId"
        :columns="columns"
        :customRow="customRow"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template slot="avatarslot" slot-scope="text, record">
          <div class="anty-img-wrap">
            <a-avatar
              shape="square"
              :src="getAvatarView(record.avatar)"
              icon="user"
            />
          </div>
        </template>

        <!--				<span slot="loginNumber" slot-scope="text, record">-->
        <!--					<a @click="showTable(record)">在线 {{record.loginNumber}}</a>-->
        <!--					&lt;!&ndash; <a @click="handleEdit(record)">编辑</a> &ndash;&gt;-->
        <!--				</span>-->
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import {
  getAction,
  postAction,
  downloadFile,
  exportDevelopTaskProgressListInfo,
} from "@/api/manage";
import eventBus from "../../components/eventBus.js";

export default {
  name: "OperationLog",
  mixins: [JeecgListMixin],
  data() {
    return {
      timer: null,
      description: "这是操作日志页面",
      tempActionType: "",
      pikcerData: [],
      queryParam: {
        startTime: "",
        endTime: "",
        loginName: "",
        actionType: "",
        current: "1",
        size: "10",
      },
      recycleBinVisible: false,
      columns: [
        {
          title: "用户账号",
          align: "center",
          dataIndex: "loginName",
          width: 180,
        },
        {
          title: "操作时间",
          align: "center",
          dataIndex: "createTime",
          width: 300,
          // 排序回调
          sorter: (a, b) => {
            let atime = new Date(a.createTime.replace(/-/g, "/")).getTime();
            let btime = new Date(b.createTime.replace(/-/g, "/")).getTime();
            return atime - btime;
          },
          // 两个排序方向
          sortDirections: ["ascend", "descend"],
          // 默认排序
          // defaultSortOrder: "descend",
        },
        {
          title: "操作内容",
          // align: "left",
          dataIndex: "actionInfo",
          customRender: (value, row, index) => {
            const obj = {
              children: value,
              attrs: {},
            };
            obj.attrs.align = "left";
            return obj;
          },
        },
      ],
      url: {
        list: "/log/action/page",
        // delete: "/log/action/delete",
        // deleteBatch: "/log/action/delete-batch",
        exportLog: "/log/action/exportLog",
      },
    };
  },
  computed: {},
  mounted() {
    this.timeInetrval();
  },
  methods: {
    // 背景色切换
    customRow(record, index) {
      return {
        style: {
          "background-color": index % 2 == 0 ? "#FFFFFF" : "#FAFAFA",
        },
      };
    },

    //定时器获取数据
    // timeInetrval() {
    //   let that = this;
    //   this.timer = setInterval(() => {
    //     console.log("定时器执行成功,日志管理获取最新数据");
    //     that.loadData();
    //     that.loading = false;
    //     that.handlerClear();
    //   }, 1000);
    // },

    // 退出登录后清除掉定时器
    handlerClear() {
      var that = this;
      eventBus.$on("logout", () => {
        console.log("1111111111,2222222222,33333333,444444444444");

        if (that.timer) {
          console.log("============清除timer定时器===========");
          clearInterval(that.timer);
          that.timer = null;
        }
      });
      console.log("55555555,6666666666,77777777777,888888888888");
    },
    resetParam() {
      this.queryParam = {
        startTime: "",
        endTime: "",
        loginName: "",
        actionType: "",
      };
      this.tempActionType = "";
      this.pikcerData = [];
      this.loadData(1);
    },
    actionChange(value, option) {
      this.queryParam.actionType = value;
    },
    dateTimeRangeChange(dates, dateStrings) {
      this.queryParam.startTime = dateStrings[0];
      this.queryParam.endTime = dateStrings[1];
    },

    // 日志导出
    exportLog() {
      downloadFile(
        this.url.exportLog,
        "日志数据表" + ".xls",
        this.queryParam,
        "post"
      );
    },
  },
  // beforeDestroy() {
  //   console.log("销毁定时器执行成功,日志管理");
  //   clearInterval(this.timer);
  //   this.timer = null;
  // },

  watch: {
    $route(to, from) {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ant-table-thead > tr > th {
  text-align: center;
}
</style>
